<template>
  <div class="flldata login">
    <div
      class="underline"
      style="width:120px;"
    >
      <span class="title1 color1 zIndex fontBold">资料填写</span>
    </div>
    <div class="login_content">
      <div class="content">
        <div class="login_field">
          <van-cell-group>
            <van-field
              v-model="form.company"
              center
              readonly
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业全称</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.nickname"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业简称</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.type"
              center
              is-link
              readonly
              @click="showType"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业类型</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.group"
              center
              is-link
              readonly
              @click="showGroup"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业层级</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-if="groupStatus"
              v-model="form.group_name"
              center
              @update:model-value="updateValue"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">集团公司</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="select.level"
              center
              is-link
              readonly
              @click="showLevel"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">入会等级</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.address"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">通讯地址</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <!-- <van-field
              v-model="select.economic"
              center
              is-link
              readonly
              @click="showEconomic"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">经济类型</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field> -->
            <van-field
              v-model="form.username"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">企业平台管理员</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.phone"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">管理员手机号</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <!-- <van-field
              v-model="form.name"
              center
              readonly
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">上传资质</span>
                <span class="line content3 font400 color3">|</span>
              </template>
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  color="#12142E"
                  class="setBnt"
                >
                  上传
                </van-button>
              </template>
            </van-field> -->
          </van-cell-group>
          <van-row
            class="listst"
            type="flex"
            justify="center"
            v-show="showSettled"
          >
            <van-col span="24">
              <div
                class="items"
                v-for="(item, index) in EnterpriseInfo"
                :key="index"
                @click="chVal(item.company_name)"
              >
                <p>名称:{{ item.company_name }}</p>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        @click="back"
        class="btn_item cancle font400 content3 color4"
      >
        返回
      </div>
      <div
        @click="submit"
        class="btn_item agree font400 content3 color4"
      >
        提交
      </div>
    </div>
  </div>
  <Choose
    :columns="columns"
    :visible="visible"
    :Choosetitle="Choosetitle"
    :type="type"
    @closeDialog="closeDialog"
    @confirmValue="confirmValue"
  />
</template>

<script setup lang="ts">
import _ from 'lodash'
import { ref, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
import { Toast, Dialog } from 'vant'
// getCompanyEconomic
import { companyApply, companyInfo, getCompanyLevel, companyQueryName, getLastApply, getDemandType } from '@/api'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const Choose = defineAsyncComponent(() => import('@/components/Choose/index.vue'))
const visible: any = ref(false)
const groupStatus: any = ref(false)
const columns: any = ref([])
const type: any = ref(0)
const Choosetitle: any = ref('')
const EnterpriseInfo: any = ref([])
const showSettled: any = ref(false)
const form = ref({
  company: '',
  nickname: '',
  type: '',
  group: '',
  group_name: '',
  level: '',
  economic: '',
  username: '',
  phone: '',
  address: ''
})

const select = ref({
  type: '',
  group: '',
  level: '',
  economic: '',
  role: ''
})

onMounted(() => {
  document.body.style.background = '#fff'
})

onUnmounted(() => {
  document.body.style.background = '#f7f7f7'
})

const getData = async () => {
  form.value = await getLastApply()
  if (form.value.type) {
    select.value.level = form.value.level_name
    select.value.group = form.value.group_name
    select.value.type = form.value.type === 1 ? '地产商' : '供应商'
    form.value.company = form.value.company_name
    select.value.economic = form.value.economic_name
    select.value.group = form.value.group === 1 ? '集团公司' : '项目公司'
    form.value.username = form.value.admin_name
    groupStatus.value = form.value.group === 2
  }
  const res:any = await companyInfo()
  form.value.company = res.company
}
getData()

const updateValue = async () => {
  const { list }:any = await companyQueryName({ company_name: form.value.group_name })
  if (list.length > 0) {
    EnterpriseInfo.value = list
    showSettled.value = true
  } else {
    showSettled.value = false
  }
}

const chVal = async (i:any) => {
  form.value.group_name = i
  showSettled.value = false
}

const showType = async () => {
  columns.value = await getDemandType({ type: 'company' })
  visible.value = true
  type.value = 1
  Choosetitle.value = '企业类型'
}

const showGroup = () => {
  columns.value = ['集团公司', '项目公司']
  visible.value = true
  type.value = 2
  Choosetitle.value = '企业层级'
}

const showLevel = async () => {
  const levels = await getCompanyLevel() as any
  console.log('levels', levels && levels.filter((item: any) => console.log('ddd', item)))
  columns.value = levels && levels.filter((item: any) => item.id !== 2)
  visible.value = true
  type.value = 3
  Choosetitle.value = '入会等级'
}

// const showEconomic = async () => {
//   columns.value = await getCompanyEconomic()
//   visible.value = true
//   type.value = 4
// }

const closeDialog = () => {
  visible.value = false
}

const confirmValue = (val: any, type: any, index: any) => {
  if (type === 1) {
    form.value.type = val.id
    select.value.type = val.name
  } else if (type === 2) {
    form.value.group = index + 1
    select.value.group = val
    groupStatus.value = !!index
    form.value.group_name = index === 0 ? '' : form.value.group_name
  } else if (type === 3) {
    form.value.level = val.id
    select.value.level = val.name
  } else if (type === 4) {
    form.value.economic = val.id
    select.value.economic = val.name
  }
  visible.value = false
}

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const submit = _.throttle(async function () {
  try {
    await companyApply({ ...form.value })
    Dialog.alert({
      title: '温馨提示',
      message: '提交成功'
    }).then(() => {
      router.replace({ path: '/applyOf', query: { type: 1 } })
    })
  } catch (error: any) {
    Toast(error.message)
  }
}, 2000)

// const submit = async () => {
//   try {
//     await companyApply({ ...form.value })
//     Dialog.alert({
//       title: '温馨提示',
//       message: '提交成功'
//     }).then(() => {
//       router.replace({ path: '/applyOf', query: { type: 1 } })
//     })
//   } catch (error: any) {
//     Toast(error.message)
//   }
//   // router.push('/applyOf')
// }

</script>

<style lang="less" scoped>
.flldata {
  padding: 0 30px 80px;
  margin-top: 40px;
  .login_content{
   margin-top: 20px;
   .login_field{
     position: relative;
   }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
    .line {
    margin: 0 30px;
  }
  .setBnt{
    width:98px;
    height: 30px;
    background: #12142E;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
        padding: 0 30px;
        height: 100%;
        .agree {
            width: 140px;
            height: 44px;
            background: #ff7a1f;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
        .cancle {
            width: 140px;
            height: 44px;
            background: #85898c;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
    }
}
  .listst {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 269px;
    left: 50%;
    z-index: 99;
    background-color: #f8f8f8;
    transform: translateX(-50%);
    border: 1px solid #666;
    .items {
      border-bottom: 1px solid #333;
    padding: 15px 5px;

      p {
        margin: 5px;
      }
    }
    .items:last-child {
      border-bottom: none;
    }
  }
  @media (min-width: 750px) {
.flldata {
  padding: 0 30px 80px;
  margin-top: 40px;
  .login_content{
   margin-top: 20px;
   .login_field{
     position: relative;
   }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
    .line {
    margin: 0 30px;
  }
  .setBnt{
    width:98px;
    height: 30px;
    background: #12142E;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
        padding: 0 30px;
        height: 100%;
        .agree {
            width: 140px;
            height: 44px;
            background: #ff7a1f;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
        .cancle {
            width: 140px;
            height: 44px;
            background: #85898c;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
    }
}
  .listst {
    width: 90%;
    margin: 0 auto;
    position: absolute;
    top: 269px;
    left: 50%;
    z-index: 99;
    background-color: #f8f8f8;
    transform: translateX(-50%);
    border: 1px solid #666;
    .items {
      border-bottom: 1px solid #333;
    padding: 15px 5px;

      p {
        margin: 5px;
      }
    }
    .items:last-child {
      border-bottom: none;
    }
  }
  }
</style>
